[#ftl]

[@define "agile.EventActionEditor" "agile.MultiValueMetadataEditor" ]
[#assign templateString]	
<form>
	<div style="margin-top:2px"><b>{this_remark}</b></div>
	<hr/>
	<div data-dojo-type="agile.MultiSelectEditorX" data-dojo-attach-point="selector" data-dojo-props='valueDelimeter:";"'>
		<div>
		{i18n_Action}
		<div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='style:"display:inline",name:"action",width:"200px",fireOnChange:false,required:true,options:"{this_actions}"'></div>
		<div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='style:"visibility:hidden",name:"actionCode",width:"0px",fireOnChange:false,readOnly:true'></div>
		<div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='style:"display:inline",name:"target",width:"200px",fireOnChange:false,readOnly:true'></div>
		<div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='style:"visibility:hidden",name:"targetId",width:"0px",fireOnChange:false,readOnly:true'></div>
		<div class="lookupIcon" style="display:inline">?</div>
		</div>
 	</div>
	
 	<div style="margin-top:5px"> 		
		<div>Customize <b>function:{this_name}({this_args})</b></div>
		<div data-dojo-type='dijit/form/SimpleTextarea' data-dojo-props='cols:80,rows:5,name:"program",readOnly:true' class="meditor"></div>
	</div>
	
 </form> 
[/#assign]
templateString:"${templateString?js_string}",name:"",args:"",remark:""
,propertyNames:[]
,delimeter:":"
,actions:"1.Show dialog,2.Hide dialog,3.Show panel,4.Hide panel[#--,5.Open page in new window,6.Other--]"
,init:function(){
	this.inherited(arguments);

	query(".lookupIcon",this.domNode).on("click",lang.hitch(this,"lookupObject"));
	
	style.set(this.selector.valueOptions.domNode,"height","80px");
	
	this.meditors["action"].watch("value",lang.hitch(this,function(name,old,value){
		this.meditors["target"].set("value","");
		var actionCode = value.substring(0,value.indexOf("."));
		switch(actionCode){
		case "1":
		case "2":
		case "3":
		case "4":
			break;
		case "5":
		}
	}));
	
	var self = this;
	self.actionCodeDesc = {};
	array.forEach(this.actions.split(","),function(item){
		var codeDesc = item.split(".");
		self.actionCodeDesc[codeDesc[0]] = codeDesc[1];
	});
}
,lookupObject:function(){
	var actionCode = this.meditors["action"].get("value");
	if(actionCode){
		actionCode = actionCode.substring(0,actionCode.indexOf("."));
//		console.log("Action Code:",actionCode,",context:",this.context);
//		var selectors = ["",".agileDialog",".agileDialog",".agileContentPane"];
////		topic.publish("agile.object.refresh",actionCode,selectors[parseInt(actionCode)]);
//		
//		var selector = selectors[parseInt(actionCode)];
		
		topic.publish("agile.object.lookup",this,{			
			lookupItems:function(){
				var items = [];
					
				switch(actionCode){
				case "1" ://show dialog					
				case "2"://hide dialog
					array.forEach(MockupWorkspace.getChildren(),function(page){
						if(page.selected){
							query(".agileDialog",page.domNode).forEach(function(node){
								var widget = registry.byNode(node);
								items.push({
									id:widget.metadata("id")
									,title:widget.metadata("parameters.title")
									,parent:"root"
									,actionCode:actionCode
								});
							});	
						}
					});
					
					break;
				case "3"://show panel
				case "4"://hide panel
					array.forEach(MockupWorkspace.getChildren(),function(page){
						if(page.selected){					
							query(".agileContentPane",page.domNode).forEach(function(node){
								var widget = registry.byNode(node);
								items.push({
									id:widget.metadata("id")
									,title:widget.metadata("parameters.name")
									,parent:"root"
									,actionCode:actionCode
								});
							});		
						}
					});
					break;
				case "5"://open window
					break;
						
				}
				return items;	
			}
			,onItemSelected:function(item){
				this.meditors["actionCode"].set("value",item.actionCode);
				this.meditors["target"].set("value",item.title);
				this.meditors["targetId"].set("value",item.id);
				this.selector.addOption();
			}
		});		
	}
}
//,set:function(name,value){
//	if(name == "context"){
//		this.playStateEditor[name] = value;
//	}
//	this.inherited(arguments);
//}
,reset1:function(name,value){

	if(name == "value"){
		//clear dirty value
		this.stringToValue(null);
		this.selector.set("value",null);
//		console.log("3###########reset1",this.name,value[this.name]);
		if(value[this.name]){//1:w14437712592204567890:Hello World;1:w1443771259257234567890:Hello World @@@@
			array.forEach(value[this.name].split(";"),lang.hitch(this,function(action){
				var v = action.split(this.delimeter);
				var key = v[0] + this.delimeter + v[1],value = action, label = this.actionCodeDesc[v[0]] + this.delimeter + v[2];
				
				this.selector.updateOption([key,value,label]);
			}));
		}
	}else{
		this.inherited(arguments);
	}
}
,getKey:function(){
	 return this.meditors["actionCode"].get("value") + this.delimeter + this.meditors["targetId"].get("value");
 }
 ,valueToString:function(){
	 if(this.isValid()){
		 var key = this.getKey();
		 var value = this.get("value");
		 var label = this.actionCodeDesc[this.meditors["actionCode"].get("value")]  + this.delimeter + this.meditors["target"].get("value");
		 return [key,value,label];
	 }
	 return null;
 }
 ,stringToValue:function(text){
	 //console.log("Event:",text)
 	 if(text){
 		var values = text.split(this.delimeter);
 		this.meditors["action"].set("value",values[0] + "." + this.actionCodeDesc[values[0]]);
 		this.meditors["actionCode"].set("value",values[0]);
 		this.meditors["targetId"].set("value",values[1]);
 		this.meditors["target"].set("value",values[2]);
	 }else{
		this.meditors["action"].set("value","");
		this.meditors["actionCode"].set("value","");
 		this.meditors["targetId"].set("value","");
	 	this.meditors["target"].set("value","");
	 }
 }
,get:function(name){		
	if(name == "value"){
		//get all options from the selector and format them to text
		//return this.selector.get("value") + "@" + this.selector.get("key");		 
		 var value = this.getKey() + this.delimeter + this.meditors["target"].get("value");
		 return value;
	}else{
		return this.inherited(arguments);
	}
}
[/@]
[@define "agile.EventEditor","agile._XMetadataEditor"]	
	[#assign templateString][#compress]	
	<div style="width:100%">
		<div style="margin:3px 0px" data-dojo-type="agile.EventActionEditor" data-dojo-props="name:'{this_name}',args:'{this_args}',remark:'{this_remark}'" class="xeditor"></div>
	</div>
	[/#compress]
	[/#assign]
	templateString:"${templateString?js_string}"
[/@]
